<!--  -->
<template>
  <div class="news-main">
    <el-card class="card" :body-style="{ padding: '0px' }" shadow="hover">
      <div slot="header">
        <span>查询文章</span>
      </div>
      <el-row style="margin:20px" :gutter="20">
        <el-col :span="6">
          <el-input v-model="search.title" placeholder="名称查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="search.author" placeholder="作者查询"></el-input>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button size="small" type="primary" @click="toSearch">查询</el-button>
          <el-button size="small" @click="toRemoveSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never" v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="toAdd">新增</el-button>
      </div>
      <el-pagination
        style="float:right; margin:20px 0 "
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.pages"
      ></el-pagination>
      <el-table :data="newsList" border stripe>
        <el-table-column type="index" width="100"></el-table-column>
        <el-table-column prop="title" label="文章标题" width="200"></el-table-column>
        <el-table-column prop="author" label="作者" width="150"></el-table-column>
        <el-table-column prop="desc" label="文章描述" width="250"></el-table-column>
        <el-table-column label="封面图片" width="250">
          <template slot-scope="scope">
            <img style="height:50px" :src="scope.row.cover" alt />
          </template>
        </el-table-column>
        <el-table-column label="是否最热" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.hot=='1'">热门</span>
            <span v-else>冷清</span>
          </template>
        </el-table-column>
        <el-table-column label="阅读量/赞" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.viewCount}}</span>/
            <span>{{scope.row.zanCount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="small">查看</el-button>

            <el-button type="primary" size="small" @click="editNews(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="removeNews(scope.row.id)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
const _ = require("lodash");
import { addNewsList, delNews,newsDetail } from "@/api/material/news";
export default {
  data() {
    return {
      search: {},
      search2: {},
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30],
      },
      newsList: [],
      loading: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    editNews(id) {
      this.$router.push({ name: "NewsUpload", params: { id } });
    },
    removeNews(id) {
      var that = this;
      this.$confirm("确定要删除吗", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "算了兄弟",
      })
        .then(() => {
          delNews({ id: id }).then((res) => {
            console.log(res);
            if (res.code == "success") {
              this.$message({
                type: "success ",
                message: `删除成功`,
              });
              that.init();
            }
          });
        })
        .catch((action) => {});
    },
    toAdd() {
      this.$router.push({ path: "/meterial/newsDetail" });
    },
    handleSizeChange(v) {
      this.page.limit = v;
      this.init();
    },
    handleCurrentChange(v) {
      this.page.start = v;
      this.init();
    },
    uploadImgSuccess(response, file) {
      this.init();
    },
    toRemoveSearch() {
      this.search = {};
      this.search2 = {};
      this.init();
    },
    async init() {
      var obj = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search2,
      };
      this.loading = true;
      let res = await addNewsList(obj);
      console.log(res);
      
      this.newsList = res.data.list;
      this.page.pages = res.data.totalRow;
      this.loading = false;
      // let res1 = await newsDetail({id:res.data.list[0].id})
      // console.log(res1);
      // addNewsList(obj).then((res) => {
      //   console.log(res);
      //   this.newsList = res.data.list;
      //   this.page.pages = res.data.totalRow;
      //   this.loading = false;
      // });
    },
    toSearch() {
      this.search2 = _.pickBy(this.search, (item) => item);
      this.page.start = 1;
      this.init();
    },
  },
};
</script>

<style  lang='scss' scoped >
.news-main {
  padding: 20px;
  .el-card {
    border: 0;
  }
  .card {
    margin-bottom: 50px;
  }
}
</style>
